<template>
  <div>

    <Panel title="异常订单处理" useBack>
         <ModifyForm
        slot="body"
        :editColumn="editColumn"
        :temporaryData='temporaryData'
        labelWidth="150px"
        :updateData="updateData"
      >
        <p
          slot="title"
        ></p>
        <div slot="timePost">
          <el-date-picker
          v-model="appointmentTime"
          type="datetimerange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="timestamp"
          :picker-options="pickerOptions"
          style="height:40px"
        ></el-date-picker>
        </div>

        <div slot="stages">
          <div class="add">
             <el-button  type="primary" @click="addIds()" style="margin-left:10px;margin-bottom:20px">加一行</el-button>
          </div>
          <div class="lingbox"  v-for="(item, index) of formTime.timeRate" :key="index">
              <div class="input-box">
                  <span class="input-title">时间段:</span><el-input v-model="item.beginTime"  placeholder="时间段"></el-input>-
                  <el-input v-model="item.endTime" placeholder="结束时间"></el-input>
              </div>
              <div class="input-box">
                 <span class="input-title">电量值:</span><el-input v-model="item.powerNum" placeholder="电量值"></el-input>
              </div>
              <el-button  type="primary"  @click="deleteIds(index)" style="margin-left:10px">-</el-button>
          </div>
          
        </div>
      </ModifyForm>
    </Panel>
  </div>
</template>
<script>
import Panel from "@/components/Panel";
import ModifyForm from "@/components/ModifyForm";
import ModalPanel from "@/components/ModalPanel";
import FileUpload from '@/components/FileUpload';
import request from "@/tools/request";
import { dateFormat } from "@/tools/time";

export default {
  name:'orderAbnormal_',
  components: {
    FileUpload,
    Panel,
    ModalPanel,
    ModifyForm
  },
  data() {
    return {
      configValue:"",
      editorOption: {},
      typeList: [],
      appointmentTime: null,
      formTime: {
        timeRate: [],
      },
      oid: '',
      temporaryData: {
        coverImg: [],
        publishStatus: false
      },
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      editColumn: [
        {
          name: "充电开始电表值",
          prop: "beginMeter",
          type: "text",
          width:12,
          required: true
        },
        {
          name: "充电开始时电量值",
          width: 12,
          prop: "beginSoc",
          type: "text",
          required: true
        },
        {
          name: "充电时长（秒）",
          width: 12,
          prop: "chargeTime",
          type: "text",
          required: true
        },
        {
          name: "充电结束时电量值",
          width: 12,
          prop: "endSoc",
          type: "text",
          required: true
        },
        {
          name: "充电结束电表电量值",
          width: 12,
          prop: "endMeter",
          type: "text",
          required: true
        },
        {
          name: "充电结束原因",
          width: 12,
          prop: "msg",
          type: "text",
          required: false
        },
        {
          name: "充电时间",
          width: 12,
          prop: "endTime",
          type: "other",
          required: false,
          slotName: 'timePost'
        },
        {
          name: "费用清单",
          width: 24,
          prop: "stages",
          type: "other",
          slotName: 'stages'
        },
      ],
    };
  },
  
  computed: {
  },
  methods: {
   async updateData(values) {
    //  console.log('rate------',this.formTime.timeRate)
     if(!this.formTime.timeRate){
       this.$message.error('请上传费用清单')
       return
     }
    //  let tag = true
    //  this.formTime.timeRate.map(item => {
    //    console.log('item', item.powerNum)
       
    //  })
    //  if(!tag){
    //    this.$message.error('请完善费用清单')
    //    return
    //  }
    //  let oid= this.oid
     let endTime = dateFormat(this.appointmentTime ? (this.appointmentTime[1]) : '', 'yyyy-MM-dd HH:mm:ss')
     let  beginTime = dateFormat(this.appointmentTime ? this.appointmentTime[0] : '', 'yyyy-MM-dd HH:mm:ss')
     let stages = this.formTime.timeRate
     const { beginMeter, beginSoc, chargeTime, endSoc, oid, endMeter, msg } = values
      let res = await request({
        url: '/error/exception/bill',
        method: "POST",
        data: { beginMeter, beginSoc, chargeTime, endSoc, oid, endMeter, msg, stages, endTime, beginTime }
      });
      if(res.code !==0 ) return
      this.$message.success('编辑成功')
      this.$router.go(-1)
    },
    async fetchData(id, type){
      let urls 
      if(type == 4){
        urls = '/order/third/info/'
       
      }else{
         urls = '/order/wx/info/'
      }
      let res = await request({
        url: urls+id,
        method: "GET",
        data: {}
      });
      let datas 
      if(type == 4){
        datas = res.info
       
      }else{
       datas = res.wxOrder
      }

      if(datas.beginTime){
        this.appointmentTime = [new Date('20'+datas.beginTime), new Date('20'+datas.endTime)]
      }else{
        let time = datas.startTime ? datas.startTime : datas.createTime
        this.appointmentTime = [new Date('20'+time), new Date('20'+time)]
      }
      datas.beginMeter = datas.beginMeter ? datas.beginMeter : 0
      datas.beginSoc = datas.beginSoc ? datas.beginSoc : 0
      datas.chargeTime = datas.chargeTime ? datas.chargeTime : 0
      datas.endSoc = datas.endSoc ? datas.endSoc : 0
      datas.endMeter = datas.endMeter ? datas.endMeter : 0
      datas.msg = datas.msg ? datas.msg : '异常处理结束'
      this.temporaryData = datas
    },
    async rate(id){
       let res = await request({
        url: `/order/rate/${id}`,
        method: "GET",
      });
      let currentRate = res.rate.rates
      currentRate.map( item => {
        item.datatime = item.beginTime +'-'+item.endTime
        if(!item.powerNum){
          item.powerNum = 0
        }
        return item
      })
      this.currentRate = currentRate
       this.formTime.timeRate = currentRate
    },
    deleteIds(index) {
      this.formTime.timeRate.splice(index, 1)
    },
    addIds(){
      this.formTime.timeRate.push({})
    },
    
  },
  created() {
    if(this.$route.query.id)
    this.fetchData(this.$route.query.id, this.$route.query.type)
    this.rate(this.$route.query.id)
  }
};
</script>

<style lang='scss' >
.lingbox{
  display: flex;
  margin-bottom: 7px;
}
.input-title{
  width: 120px;
}
.input-box{
  display: flex;
}
.add{
  display: flex;
  justify-content: flex-end
}
</style>